<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" fixed />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image round class="avatar" :src="profile.photo" @click="selectPhotoFn" />
          <!-- accept="image/*" 不限图像的形式 multiple 可以选多张-->
          <input type="file" ref="photo" hidden accept="image/*" @change="uploadPhotoFn">
        </template>
      </van-cell>
      <van-cell title="名称" is-link :value="profile.name" @click="isShowNameDialog=true" />
      <van-cell title="性别" is-link :value="profile.gender ===1?'男':'女'" />
      <van-cell title="生日" is-link :value="profile.birthday" @click="isPopupShow=true" />
    </van-cell-group>

    <!-- 修改名称的对话框 -->
    <van-dialog v-model="isShowNameDialog" title="修改名称" show-cancel-button :before-close="onNameDialogBeforeClose">
      <!-- 输入框 -->
      <van-field v-model.trim="userName" input-align="center" maxlength="7" placeholder="请输入名称" v-jujiao />
    </van-dialog>

    <!-- 修改生日的弹出层 -->
    <van-popup v-model="isPopupShow" position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate"
      @confirm="onConfirmFn" />
    </van-popup>
  </div>
</template>

<script>
import {
  getUserProfileAPI,
  updatePhotoAPI,
  updateProfileAPI
} from '@/api/user'
import moment from 'moment'
import {
  Notify,
  Toast
} from 'vant'

export default {
  name: 'UserEdit',
  data () {
    return {
      profile: {}, // 用户基本资料
      isShowNameDialog: false,
      isPopupShow: false,
      userName: '', // 收集用户输入修改名
      minDate: new Date(1900, 0, 1), // 最小的可选的日期
      maxDate: new Date(), // 最大的可选日期
      currentDate: new Date() // 当前日期
    }
  },
  async created () {
    const res = await getUserProfileAPI()
    // console.log(res)
    this.profile = res.data.data
    this.currentDate = new Date(res.data.birthday)
  },
  methods: {
    // 修改用户名
    async onNameDialogBeforeClose (action, done) {
      // 判断用户输入的内容
      if (action === 'cancle') {
        done()
        return
      }
      if (!this.userName) {
        Notify({
          type: 'warning',
          message: '名称不能为空'
        })
        done(false)
      } else {
        // 1.发请求
        await updateProfileAPI({
          name: this.userName,
          birthday: this.profile.birthday
        })
        // 2.更新到vue中prifile
        this.profile.name = this.userName
        this.userName = ''
        done()
      }
    },
    // 选择图片
    selectPhotoFn () {
      // 用js的方式触发文件域的打开
      this.$refs.photo.click()
    },
    // 上传头像
    async uploadPhotoFn (e) {
      // 拿到上传的文件对象
      // console.log(e.target.files)
      // const { 0: file } = e.target.files 也可以写成
      const file = e.target.files[0]
      // console.log(file)
      const {
        name,
        size
      } = file
      // 判断-图片格式
      const regexp = /\.(png|jpe?g|gif|svg|webp)$/i
      if (!regexp.test(name)) {
        Toast.fail('图片格式不正确，请重新选择')
        return
      }
      // 判断-图片大小
      if (size / 1024 / 1024 > 2) {
        Toast.fail('图片大小不能超过2M')
        return
      }
      // 创建FormData 就是一个表单对象 上传会自动把Content-Type 改为multipart/form-data
      const fd = new FormData()
      // 给表单对象添加后台需要的字段
      fd.append('photo', file)
      // 调用接口-上传
      const res = await updatePhotoAPI({
        form: fd
      })
      console.log(res)
      // 更新头像-覆盖之前的头像
      this.profile.photo = res.data.data.photo
    },
    // DatetimePicker的确认事件
    async onConfirmFn (value) {
      try {
        const str = moment(value).format('YYYY-MM-DD')
        // console.log(str)
        // 1.发请求
        await updateProfileAPI({
          name: this.profile.name,
          birthday: str
        })
        // 2.更新vue变量
        this.profile.birthday = str
        this.onCancleFn()
        Toast.success('修改成功')
      } catch (e) {
        Toast.fail('修改失败')
      }
    },
    onCancleFn () {
      this.isPopupShow = false
    }
  }
}

</script>

<style lang="less" scoped>
  .user-edit-container {
    padding-top: 46px;

    .avatar {
      width: 50px;
      height: 50px;
    }
  }

</style>
